<div id="content_header">
  <h3>Term Target</h3>
</div>
<div class="row">
 <!--  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> -->
    <form role="form" ng-submit="loadTarget()">

      <div class="col-md-6 col-lg-3">
        <div class="form-group">
          <label for="">Course Type</label>
          <select class="form-control" ng-options="courseType.Id as courseType.Name for courseType in courseTypes" ng-model="params.course_types">
            <option value="">Select a Course Type.</option>
          </select>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="form-group">
          <label for="">Year</label>
          <input type="text" class="form-control" ng-model="params.year">
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div style="margin-top:23px;"></div>
        <button type="submit" class="btn btn-primary">Load Target</button>
      </div>

    </form>
  <!-- </div> -->
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <table class="table table-hover table-bordered">
      <thead>
        <tr>
          <th class="text-center" rowspan="2">Terms</th>
          <th class="text-center" rowspan="2">Dates</th>
          <th class="text-center" colspan="3">Registration</th>
          <th class="text-center" rowspan="2">No. of Classes</th>
          <th class="text-center" rowspan="2">Class Average</th>
          <th class="text-center" rowspan="2">No. of Re-registration</th>
          <th class="text-center" rowspan="2">Re-registration Rate</th>
          <th class="text-center" rowspan="2">No. of New Student</th>
          <th class="text-center" rowspan="2">New Student Rate</th>
          <th class="text-center" rowspan="2">No. of Dropouts</th>
          <th class="text-center" rowspan="2">Dropout Rates</th>
        </tr>
        <tr>
          <th class="text-center">Target</th>
          <th class="text-center">Actual</th>
          <th class="text-center">Sponsor</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="target in termTargets">
          <td>{{ target.Term.Number }}/{{ target.Term.Year }}</td>
          <td>{{ target.Term.StartDate | date: 'dd MMM' }} - {{ target.Term.EndDate | date: 'dd MMM' }}</td>
          <td class="text-right">
            <a href ng-click="editThis(target.Term)" ng-hide="target.Term.Editing">{{ target.Term.Target }}</a>
            <form role="form" ng-show="target.Term.Editing" ng-submit="submitThis(target.Term)">
              <div class="input-group">
                <input type="text" class="form-control" id="" placeholder="Input field" ng-model="target.Term.Target">
                <span class="input-group-btn">
                <button class="btn btn-default" type="submit">Save</button>
                <button class="btn btn-default" type="button" ng-click="cancelThis(target.Term)">Cancel</button>
                </span>
              </div>
            </form>
          </td>
          <td class="text-right">{{ target.EnrollmentCount }}</td>
          <td class="text-right">{{ target.EnrollmentCountBySponsor }}</td>
          <td class="text-right">{{ target.NumberOfClasses }}</td>
          <td class="text-right">{{ target.ClassAverage | number : 2 }}%</td>
          <td class="text-right">{{ target.NumberOfReRegistration }}</td>
          <td class="text-right">{{ target.ReRegistrationRate | number : 2 }}%</td>
          <td class="text-right">{{ target.NumberOfNewRegistration }}</td>
          <td class="text-right">{{ target.NewRegistrationRate | number : 2 }}%</td>
          <td class="text-right">{{ target.NumberOfDropOuts }}</td>
          <td class="text-right">{{ target.DropOutRates }}%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>